<template>
  <div class="page">

    <formRender :form="form" :columns="columns" ref="forms" />
    <el-button @click="test">测试</el-button>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, reactive, ref} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekDrawer from "@/components/business/ekDrawer/index.vue";
import demo from "@/components/form/demo.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getToken } from "@/utils/sys";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
const { $storage, $http } = globalProperties;
const store = useStore();
const router = useRouter();

let visiable = ref(false);

let form = reactive({
  
});

let columns = ref([

    {
        "type": "TableSelect",
        "column": "role_id",
        "label": "管理员角色",
        "rules": [
            {
                "required": true,
                "message": "请选择管理员角色",
                "trigger": "change"
            }
        ],
        "multiple": true,
        "layoutData":{
            "modelCode": "MODEL_ROLE",
            "config": {
                "listUrl": "/admin/basis/getList?modelCode=MODEL_ROLE",
                "pageOn": true,
                "searchOn": true,
                "operateOn": false,
                "treeOn": false
            },
            "searchs": [
                { "type": "Input", "column": "role_name", "label": "角色名称" },
                {
                "type": "Select",
                "column": "role_state",
                "label": "状态",
                "autoInit": false,
                "url": "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE"
                },
                { "type": "DatePicker", "column": "ctime", "label": "创建日期" }
            ],
            "pages": { "pageSize": 20, "orders": [{ "field": "id", "sort": "desc" }] },
            "columns": [
                { "type": "selection" },
                {
                "label": "角色ID",
                "column": "id",
                "sortable": "custom",
                "display": "detail",
                "config": { "modelCode": "MODEL_ROLE", "detailUrl": "", "id": "id" }
                },
                {
                "label": "角色名称",
                "column": "role_name",
                "sortable": "custom",
                "display": "text"
                },
                {
                "label": "创建时间",
                "column": "ctime",
                "format": "datetime",
                "display": "text"
                }
            ]
        },
        "mapping": {
            "label":"role_name",
            "value": "id"
        }

    },
    {
        "type": "TableSelect",
        "column": "department_id",
        "label": "部门",
        "rules": [
            {
                "required": true,
                "message": "请选择管理员角色",
                "trigger": "change"
            }
        ],
        "layoutData":{
            "modelCode": "MODEL_DEPARTMENT",
            "config": {
                "listUrl": "/admin/basis/getList?modelCode=MODEL_DEPARTMENT",
                "pageOn": false,
                "searchOn": true,
                "operateOn": false,
                "treeOn": false,
                "treePropsOn": true
            },
            "searchs": [
                { "type": "Input", "column": "department_name", "label": "部门名称" },
                { "type": "DatePicker", "column": "ctime", "label": "创建日期" }
            ],
            "pages": { "pageSize": 20, "orders": [{ "field": "id", "sort": "desc" }] },
            "columns": [
                { "type": "radio" },
                {
                "label": "部门ID",
                "column": "id",
                "sortable": "custom",
                "display": "detail",
                "config": { "modelCode": "MODEL_ROLE", "detailUrl": "", "id": "id" }
                },
                {
                "label": "部门名称",
                "column": "department_name",
                "sortable": "custom",
                "display": "text"
                },
                {
                "label": "创建时间",
                "column": "ctime",
                "format": "datetime",
                "display": "text"
                }
            ]
        },
        "mapping": {
            "label":"department_name",
            "value": "id"
        }
    },
    {
        "type": "Input",
        "column": "manage_account",
        "label": "管理员账户",
        "rules": [
            {
                "required": true,
                "message": "请输入管理员账户",
                "trigger": "change"
            }
        ]
    },
    {
        "type": "Input",
        "column": "manage_pwd",
        "label": "管理员密码",
        "rules": [
            {
                "required": true,
                "message": "请输入管理员密码",
                "trigger": "change"
            }
        ]
    },
    {
        "type": "Select",
        "column": "manage_state",
        "label": "管理员状态",
        "url": "/admin/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
        "rules": [
            {
                "required": true,
                "message": "请选择管理员状态",
                "trigger": "change"
            }
        ]
    },
    {
        "type": "Input",
        "column": "manage_salt",
        "label": "加密盐",
        "rules": [
            {
                "required": true,
                "message": "请输入加密盐",
                "trigger": "change"
            }
        ]
    }

  
]);
const forms = ref(null)
const test = () => {

  forms.value.validate(()=>{

  });
 
  visiable.value = true;
  console.log(forms, form,'formform');
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
}
</style>
